<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>天地图-卫星图与地图切换</title>
  <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=99099e39a3d3c7fa12e0f84110ed1205"></script>
  <style>
    body,
    html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      font-family: "Microsoft YaHei";
    }

    #map-container {
      width: 100%;
      height: 90%;
    }

    .control-panel {
      padding: 10px;
      background: #f0f0f0;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    button {
      padding: 8px 15px;
      cursor: pointer;
      background: #fff;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    button.active {
      background: #1890ff;
      color: white;
      border-color: #1890ff;
    }

    .projection-switch {
      margin-left: auto;
    }
  </style>
</head>

<body>
  <div class="control-panel">
    <div class="map-type">
      <button onclick="switchMapType('vec')" class="active">矢量地图</button>
      <button onclick="switchMapType('img')">卫星影像</button>
      <button onclick="switchMapType('ter')">地形地图</button>
    </div>
    <div class="projection-switch">
      <button onclick="switchProjection('w')" class="active">墨卡托投影</button>
      <button onclick="switchProjection('c')">经纬度投影</button>
    </div>
  </div>
  <div id="map-container"></div>

  <script>
    // 地图实例和配置
    let map;
    let currentBaseLayer = null;
    let currentLabelLayer = null;
    let currentMapType = "vec";
    let currentProjection = "w"; // 'w'为墨卡托，'c'为经纬度

    // 初始化地图
    function initMap() {
      map = new T.Map("map-container");
      map.centerAndZoom(new T.LngLat(116.404, 39.915), 12);
      map.enableScrollWheelZoom();

      // 默认加载墨卡托投影的矢量地图
      loadLayers();
    }

    // 切换地图类型（矢量/影像/地形）
    function switchMapType(type) {
      currentMapType = type;
      loadLayers();
      updateButtonStates();
    }

    // 切换投影方式
    function switchProjection(proj) {
      currentProjection = proj;
      loadLayers();
      updateButtonStates();
    }

    // 加载图层
    function loadLayers() {
      // 移除旧图层
      if (currentBaseLayer) map.removeLayer(currentBaseLayer);
      if (currentLabelLayer) map.removeLayer(currentLabelLayer);

      // 创建新图层
      const baseLayer = createLayer(currentMapType, currentProjection);
      map.addLayer(baseLayer);
      currentBaseLayer = baseLayer;

      // 添加对应的注记层（矢量/影像有不同注记）
      if (currentMapType === "vec" || currentMapType === "img") {
        const labelType = currentMapType === "vec" ? "cva" : "cia";
        const labelLayer = createLayer(labelType, currentProjection);
        map.addLayer(labelLayer);
        currentLabelLayer = labelLayer;
      }
    }

    // 创建图层对象
    function createLayer(layerName, projection) {
      const subdomains = ["0", "1", "2", "3", "4", "5", "6", "7"];
      const randomSubdomain = subdomains[Math.floor(Math.random() * subdomains.length)];

      const urlTemplate =
        `http://t${randomSubdomain}.tianditu.gov.cn/${layerName}_${projection}/wmts?` +
        `SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=${layerName}` +
        `&STYLE=default&TILEMATRIXSET=${projection}&FORMAT=tiles` +
        `&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=99099e39a3d3c7fa12e0f84110ed1205`;

      return new T.TileLayer(urlTemplate, {
        minZoom: 3,
        maxZoom: 18,
      });
    }

    // 更新按钮状态
    function updateButtonStates() {
      // 更新地图类型按钮状态
      document.querySelectorAll(".map-type button").forEach((btn) => {
        btn.classList.toggle(
          "active",
          btn.onclick.toString().includes(`'${currentMapType}'`)
        );
      });

      // 更新投影按钮状态
      document.querySelectorAll(".projection-switch button").forEach((btn) => {
        btn.classList.toggle(
          "active",
          btn.onclick.toString().includes(`'${currentProjection}'`)
        );
      });
    }

    // 页面加载完成后初始化
    window.onload = initMap;
  </script>
</body>

</html>